<template>
    <a-modal
      :title="safeTitle"
      :visible="isVisible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      :footer="footer"
      :width="600"
    >
      <div style="width: 450px; margin: 0 auto; padding-bottom: 30px;" v-if="isVisible">
        <div v-show="isPhone">
          <div style="line-height: 30px; padding-bottom:10px;">
            为确保为您本人操作，请先进行安全验证
          </div>
          <phone-code :type="type" :phone="phone" :updateStep="updateStep" :updatePhoneCode="updatePhoneCode" :syncSafePhone="syncSafePhone" />
        </div>
        <!-- 分组件加载 -->
        <div v-show="!isPhone">
          <component :type="type" :is="currentTypeComp" :cancel="cancel" :confirm="submit" />
        </div>
      </div>
    </a-modal>
</template>

<script>
  import PhoneCode from './phoneCode.vue'
  import PhoneChange from './change/phone.vue'
  import AccountChange from './change/account.vue'
  import EmailChange from './change/email.vue'
  import PasswordChange from './change/password.vue'

  export default {
    props: {
        isVisible: {
          type: Boolean,
          default: false
        },
        updateVisibleFn: {
          type: Function,
          default: () => () => {}
        },
        type: {
          type: String,
          default: ''
        },
        phone: {
          type: String,
          default: ''
        },
        submit: {
          type: Function,
          default: () => () => {}
        },
        cancel: {
          type: Function,
          default: () => () => {}
        },
        updatePhoneCode: {
          type: Function,
          default: () => () => {}
        },
        syncSafePhone: {
          type: Function,
          default: () => () => {}
        }
    },
    components: {
      PhoneCode,
      PhoneChange,
      AccountChange,
      EmailChange,
      PasswordChange
    },
    computed: {
      currentTypeComp() {
        let pointer = null;
        switch(this.type) {
          case 'phone':
            pointer = PhoneChange;
            break;
          case 'account':
            pointer = AccountChange;
            break;
          case 'email':
            pointer = EmailChange;
            break;
          case 'password':
            pointer = PasswordChange;
            break;
          default:
        }
        return pointer
      },
      modifyText() {
        let text = ''
        switch(this.type) {
          case 'phone':
            text = '手机号'
            break;
          case 'account':
            text = '用户名'
            break;
          case 'email':
            text = '邮箱'
            break;
          case 'password':
            text = '密码'
            break;
          default:
        }
        return text
      },
      safeTitle() {
        return this.isPhone ? '安全验证' : `修改${this.modifyText}`
      }
    },
    watch: {
      isVisible(val) {
        val && (this.isPhone = val)
      }
    },
    data() {
      return {
        confirmLoading: false,
        footer: null, // 基于这个来更新
        visible: false, // 当前是否显示
        isPhone: true // 当前是否是手机组件
      }
    },
    methods: {
      handleOk() {
        this.confirmLoading = true
        setTimeout(() => {
          this.updateVisibleFn(false)
          this.confirmLoading = false
        }, 2000)
      },
      handleCancel() {
        this.updateVisibleFn(false)
      },
      updateStep(val) {
        this.isPhone = val;
      }
    }
  };
</script>

<style lang="less" scoped>
.tips {
  line-height: 40px;
}
</style>